import React, { Component, } from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import HearItem from './headerItem';
import ImagePicker from './ImagePicker';
import { Form, } from './common-ui/Form';
import Radio from './common-ui/Radio';
import { Input, } from './common-ui/Input';
import DatePicker from './common-ui/Date-Picker/picker';
import Toast from '../../../components/Toast';

export default class PersonInfo extends Component {
  constructor(p) {
    super(p);
    this.state = {
    //   radioData: [
    //     { content: "公司", value: "1", disabled: false, },
    //     { content: "个体", value: "3", disabled: false, },
    //   ],
      filters: {
        // 申请人
        province: '',
        city: '',
        county: '', // 区
        address: '',
        positiveFileId: '',
        backFileId: '',
        holdFileId: '',
        expireDate: '',
        idName: '',
        idNo: '',
        type: this.props.type,
      },
      validateResults: {},
      companyInfo: null,
    };
  }

  componentDidMount(props) {
    console.log('TAGGG', `componentDidMount====PersonInfo==${JSON.stringify(props)}===type==${props?.type}`);
    if (props && props.companyInfo) {
      let _info = {};
      if (props.type === 1) {
        _info = props.companyInfo.legalInfo;
      } else if (props.type === 8) {
        _info = props.companyInfo.authorizedInfo;
      }
      this.setState({
        companyInfo: props.companyInfo,
        filters: {
          ...this.state.filters,
          ..._info,
        },
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    console.log('TAGGG', `componentWillReceiveProps====PersonInfo==${JSON.stringify(nextProps)}===type==${nextProps.type}`);
    if (nextProps && nextProps.companyInfo) {
      let _info = {};
      if (nextProps.type === 1) {
        _info = nextProps.companyInfo.legalInfo;
      } else if (nextProps.type === 8) {
        _info = nextProps.companyInfo.authorizedInfo;
      }
      this.setState({
        companyInfo: nextProps.companyInfo,
        filters: {
          ...this.state.filters,
          ..._info,
        },
      });
    }
  }


  handleChangeFilter(key, value) {
    console.log('TAGGG', `updateImageId====params==${key}====${value}`);
    this.setState({
      filters: {
        ...this.state.filters,
        [key]: value,
      },
    });
  }

  getPersonInfo = () => {
    return {
      ...this.state.filters
    };
  }

  updateImageId(type, id) {
    if (type === 'back') {
        this.handleChangeFilter('backFileId', id);
        return;
    }
    if (type === 'hold') {
        this.handleChangeFilter('holdFileId', id);
        return;
    }
    if (type === 'positive') {
        this.handleChangeFilter('positiveFileId', id);
        return;
    }
  }
  renderItem(title, placeholder, inputId, inputValue, showDevideLine, showTip) {
    return (
      <Form.Item
        style={{ paddingVertical: 13, }}
        label= {
          <View style={{flexDirection: 'row', alignItems: 'center', width: 90, marginRight: 32, }}>
            {showTip ? <Text style={{ color: '#212121', marginRight: 2, }}>*</Text> : <View/>}
            <Text style = {styles.txtKey}>{title}</Text>
          </View>
        }
        hasLine={showDevideLine}
      >
        <Input testID={inputId} value={inputValue} placeholder={placeholder} onChange={(value) => { this.handleChangeFilter(inputId, value); }} />      
      </Form.Item>
    )
  }

  renderUploadFile(title, showDevideLine, showTip, uploadType) {
    let _imgUrl = '';
    if (this.state.companyInfo) {
      if (uploadType === 'positive') {
        _imgUrl = this.state.filters.positiveFileUrl;
      } else if (uploadType === 'back') {
        _imgUrl = this.state.filters.backFileUrl;
      } else if (uploadType === 'hold') {
        _imgUrl = this.state.filters.holdFileUrl;
      }
    }
    return (
      <Form.Item
        style={{ paddingVertical: 13, }}
        label= {
          <View style={{flexDirection: 'row', alignItems: 'center', width: 90, marginRight: 32, }}>
            {showTip ? <Text style={{ color: '#212121', marginRight: 2, }}>*</Text> : <View/>}
            <Text style = {styles.txtKey}>{title}</Text>
          </View>
        }
        hasLine={showDevideLine}
      >
        <ImagePicker OnImageId={(id) => {
            this.updateImageId(uploadType, id)
          }} imgUrl={_imgUrl} />
      </Form.Item>
    )
  }

  renderDatePickerItem(title, showDevideLine, showTip, uploadType) {
    return (
      <Form.Item
      style={{ paddingVertical: 13, }}
      label={
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            width: 90,
            marginRight: 32,
          }}
        >
          <Text style={{ color: '#212121', marginRight: 2, }}>*</Text>
          <Text style = {styles.txtKey}>到期时间</Text>
        </View>
      }
      hasLine
    >
      <View style={{ position:'relative' }}>
          <Input testID="expireDate" value={this.state.filters.expireDate} placeholder="时间" editable={false} />
          <DatePicker _style={styles.dataPicker} hint={'日期组件'} onDateChange={(dataStr)=>{
            // Toast.show({ title: '日期:' + dataStr});
            this.handleChangeFilter('expireDate', dataStr);
          }}/>
      </View>
    </Form.Item>
    )
  }


  render() {
    return (
    <>
        <HearItem title={this.props.name} />
        {this.renderUploadFile('身份证人像面', true, true, 'positive')}
        {this.renderUploadFile('身份证国徽面', true, true, 'back')}
        {this.renderItem('实际居住地址', '实际居住地址', 'address', this.state.filters.address, true, true)}
        {this.renderItem('身份证姓名', '身份证姓名', 'idName', this.state.filters.idName, true, true)}
        {this.renderItem('身份证号码', '身份证号码', 'idNo', this.state.filters.idNo, true, true)}
        {this.renderDatePickerItem('到期时间', '到期时间', true, true)}
        {this.renderUploadFile('手持文件', false, true, 'hold')}
    </>
    );
  }
}

const styles = StyleSheet.create({
  dataPicker: {
    position: 'absolute',
    right: 10,
    top: -30,
    color: '#212121',
  },
  txtKey: {
    color: '#212121',
  },
  txtTip:{
    color: '#212121',
    marginRight: 2, 
  }
});